<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日程</title>
<script type="text/javascript" src="../common/component/jquery/jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho&effect=3d">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho&effect=distressed-wood">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho&effect=fire-animation">
<style type="text/css">

	body {
		margin: 0;
		background-color: #99CC00;
	}
	
	#main {
		margin-top: 0px;
	}
	
	.cell {
		border-left: 1px solid black;
		border-bottom: 1px solid black;
		display: inline-block;
		text-align: center;
		font-size: 50px;
		font-weight: bold;
		position: absolute;
		padding-top: 10px;
	}
	.dateCell {
		border-left: 1px solid black;
		border-bottom: 1px solid black;
		display: inline-block;
		font-size: 20px;
		font-weight: bold;
		position: absolute;
	}
	
	#maskDiv {
		position:absolute;
		left: 0px;
		top: 0px;
		width: 700px;
		height:300px;
		opacity: 0.5;
		background-color: black;
	}
	
	.content {
		position:absolute;
		width: 600px;
		height: 200px;
		max-width: 600px;
		max-height: 200px;
		-webkit-border-radius: 10px;
		-webkit-box-shadow: 0px 0px 5px 5px gray;
		padding: 5px;
		opacity: 1;
		
	}
	
	#dateSelectDiv {
		position: absolute;
		left: 0px;
		top: -140px;
		width: 700px;
		height: 150px;
		background-color: white;
		text-align: center;
		-webkit-border-bottom-left-radius: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-webkit-box-shadow: 0px 0px 5px 5px gray;
		-webkit-transition: top 1s ease-in-out;
	}
	
	#dateSelectDiv:hover {
		top: 0px;
	}
	
	#dateSelectDiv input {
		width: 180px;
		height: 80px;
		font-size: 80px;
		margin-top: 30px;
		border: 0px;
	}

</style>
</head>
<body>

	<div id="main">
		
	</div>
	<div id="maskDiv">
	</div>
	<textarea id="content" class="content" placeholder="此处输入备注，按Ctrl+回车保存" required></textarea>
	
	<div id="dateSelectDiv">
		<input id="year" type="text" maxlength="4" list="yearList" onchange="pageInit();"/><font style="font-size: 80px;">/</font><input id="month" type="text" maxlength="2" list="monthList" onchange="pageInit();" style="width: 100px;"/>
	</div>
	
	<datalist id="yearList" style="display: none;">
		<option value="2000">2000</option>
		<option value="2001">2001</option>
		<option value="2002">2002</option>
		<option value="2003">2003</option>
		<option value="2004">2004</option>
		<option value="2005">2005</option>
		<option value="2006">2006</option>
		<option value="2007">2007</option>
		<option value="2008">2008</option>
		<option value="2009">2009</option>
		<option value="2010">2010</option>
		<option value="2011">2011</option>
		<option value="2012">2012</option>
		<option value="2013">2013</option>
		<option value="2014">2014</option>
		<option value="2015">2015</option>
		<option value="2016">2016</option>
		<option value="2017">2017</option>
		<option value="2018">2018</option>
		<option value="2019">2019</option>
		<option value="2020">2020</option>
	</datalist>
	
	<datalist id="monthList" style="display: none;">
		<option value="01">01</option>
		<option value="02">02</option>
		<option value="03">03</option>
		<option value="04">04</option>
		<option value="05">05</option>
		<option value="06">06</option>
		<option value="07">07</option>
		<option value="08">08</option>
		<option value="09">09</option>
		<option value="10">10</option>
		<option value="11">11</option>
		<option value="12">12</option>
	</datalist>
	
</body>
<script type="text/javascript">

	document.oncontextmenu=new Function("event.returnValue=false;");
	document.onselectstart=new Function("event.returnValue=false;");
	
	var selectDate;						// 选择的日期

	var cellWidth = parseInt($(document).width() / 7) - 1;
	var cellHeight = parseInt($(document).height() / 7) - 1;
	var weekStr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
	var nstr = new Date(); 				//当前Date资讯
	var ynow = nstr.getFullYear(); 		//年份
	var mnow = nstr.getMonth(); 		//月份
	var dnow = nstr.getDate(); 			//今日日期

	var m_days = new Array(31,28+is_leap(ynow),31,30,31,30,31,31,30,31,30,31); //各月份的总天数
	
	$(document).ready(function(){
		$("#year").val(ynow);
		$("#month").val(mnow + 1);
		pageInit();
	});
	
	$(document).keydown(function(e){
		var key =  e.which;
       	if(event.ctrlKey) {
       		if(key == 13) {
       			doRemark();
       		}
       	}
   		if(key == 27) {
   			closeRemarkDiv();
   		}
    });
	
	function pageInit() {
		$("#main").html("");
		ynow = $("#year").val();
		mnow = $("#month").val() - 1;
		var n1str = new Date(ynow,mnow,1); 	//当月第一天Date资讯
		var firstday = n1str.getDay(); 		//当月第一天星期几
		$("#dateSelectDiv").css("left", ($(document).width() - 700) / 2);
		$("#maskDiv").width($(document).width());
		$("#maskDiv").height($(document).height());
		$("#content").css("left", ($(document).width() - 600) / 2);
		$("#content").css("top", ($(document).height() - 200) / 2);
		$("#maskDiv").hide();
		$("#content").hide();
		
		for(var i = 0; i < 7; i++) {
			var left = i * (cellWidth + 1);
			$("#main").append("<div class='cell' style='width:" + cellWidth + "px;height:" + (cellHeight - 8) + "px;left:" + left + "px;'><div class='font-effect-3d' style='color:white;'>" + weekStr[i] + "</div></div>");
		}
		for(var i = 0; i < 6; i++) { 			//表格的行
		   for(var k = 0; k < 7; k++) { 		//表格每行的单元格
		      idx = i * 7 + k; 					//单元格自然序列号
		      date_str = idx - firstday + 1; 	//计算日期
		      (date_str <= 0 || date_str > m_days[mnow]) ? date_str = "&nbsp;" : date_str = idx - firstday + 1; //过滤无效日期（小于等于零的、大于月总天数的）
		      var left = k * (cellWidth + 1);
		      var top = cellHeight + 2 + i * (cellHeight + 1);
		      //打印日期：今天不同底色
		      ynow == nstr.getFullYear() && mnow == nstr.getMonth() && date_str == dnow ? $("#main").append("<div id='" + ynow + (mnow + 1) + date_str + "' class='dateCell' style='background-color: #6699FF;width:" + cellWidth + "px;height:" + cellHeight + "px;left:" + left + "px;top:" + top + "px;' ondblclick='showRemarkDiv(this);'><div class='font-effect-fire-animation'>" + date_str + "<input type='hidden'/><div style='margin-left:3px;font-size: 12px;line-height: 20px;'></div></div></div>") : $("#main").append("<div id='" + ynow + (mnow + 1) + date_str + "' class='dateCell' style='width:" + cellWidth + "px;height:" + cellHeight + "px;left:" + left + "px;top:" + top + "px;' ondblclick='showRemarkDiv(this);'><div class='font-effect-distressed-wood' style='color:black;'>" + date_str + "<input type='hidden'/><div style='margin-left:3px;font-size: 12px;line-height: 20px;'></div></div></div>");
		   }
		}
		loadRemark();
	}
	
	//是否为闰年
	function is_leap(year) { 
	   return (year % 100 == 0 ? res = (year % 400 == 0 ? 1 : 0) : res = (year % 4 == 0 ? 1 : 0));
	}

	function loadRemark() {
		$.post("schedule.action.jsp", {ACTION:"searchSchedules"}, function(data){
			var jsonArr = jQuery.parseJSON(data);
			$.each(jsonArr, function(inx, obj){
				$("#" + obj.DATE).find("div").find("input").val(obj.ID);
				$("#" + obj.DATE).find("div").find("div").html("&nbsp;&nbsp;" + obj.CONTENT.substring(0, 40) + "...");
				$("#" + obj.DATE).attr("title", obj.CONTENT);
			});
		});
	}
	
	function showRemarkDiv(obj) {
		selectDate = obj;
		//alert("" + ynow + (mnow + 1) + $(selectDate).find("div").html());
		$("#maskDiv").show();
		$("#content").show();
		$("#content").focus();
		$("#content").val($(selectDate).attr("title"));
	}
	
	function doRemark() {
		var content = $("#content").val();
		if(!content) {
			return;
		}
		var date = "" + ynow + (mnow + 1) + $(selectDate).find("div").html().substring(0, 2);
		if(date.indexOf("<") != -1) {
			date = date.substring(0, date.length - 1);
		}
		var id = $(selectDate).find("div").find("div").html();
		if(!id) {
			$.post("schedule.action.jsp", {ACTION:"addSchedule",CONTENT:content,DATE:date}, function(data){
				var json = jQuery.parseJSON(data);
				$(selectDate).find("div").find("div").html("&nbsp;&nbsp;" + content.substring(0, 40) + "...");
				$(selectDate).attr("title", content);
				closeRemarkDiv();
			});
		} else {
			$.post("schedule.action.jsp", {ACTION:"editSchedule",ID:id,CONTENT:content,DATE:date}, function(data){
				var json = jQuery.parseJSON(data);
				if(json.FLAG == 0) {
					alert("修改出错，请联系管理员");
					return;
				}
				$(selectDate).find("div").find("div").html("&nbsp;&nbsp;" + content.substring(0, 40) + "...");
				$(selectDate).attr("title", content);
				closeRemarkDiv();
			});
		}
	}
	
	function closeRemarkDiv() {
		$("#maskDiv").hide();
		$("#content").hide();
		$("#content").val("");
	}

</script>
</html>